// 支付组件
import React,{Component} from 'react'
// 导入本组件的样式
import './index.css'
import {useNavigate} from 'react-router-dom'

function withRouter(Component) {
  return (props) => (
    <Component
      {...props}
      navigate={useNavigate()}
    />
  );
}
class Pay extends Component{
	constructor(props) {
		super(props)
		this.state={
			name:"张三"
		}
		this.turn=this.turn.bind(this)
		
	}
	componentWillMount(){ //组件挂载前
		console.log("挂载前")
	}
	turn(){
		  // react-router-dom6的编程式跳转
		  this.props.navigate("/cate",{state:{sex:"男"}});
	}
	// React.Fragment 
	// React 中的一个常见模式是一个组件返回多个元素。Fragments 允许你将子列表分组，而无需向 DOM 添加额外节点。
	render(){ //渲染中
		return(
		 <React.Fragment>
			<h1>加了Fragment就是牛</h1>
			<div>
				<h1>{this.state.name}</h1>
				<h1 className="mypaytitle">我是支付组件</h1>
				<hr />	
				<button onClick={this.turn}>去到分类组件</button>	
				<div>
					{this.props.one}
				</div>	
				<div>
					{this.props.two}
				</div>
			</div>
		 </React.Fragment>
		)
	}

	componentDidMount(){ //react组件挂载后 对应vue的mounted
		console.log("组件挂载后")
		this.setState({
			name:"法外狂徒"
		})
		// fetch 请求   原生js 	 ajax ---XMLHttpRequest
		// fetch('https://api.it120.cc/ljf/shop/goods/category/all')
		//   .then(response => response.json()) //转化数据格式为json
		//   .then(data =>{
		// 	  // data--返回的数据
		// 	  console.log(data)
		//   });
		 // 
		 // fetch(url,{
			//  method:"",//请求方式
			//   mode: 'cors', // no-cors, *cors, same-origin /模式 同域 还是 跨域
			//    cache: 'no-cache',//是否缓存请求
			//   headers: {
			//        'Content-Type': 'application/json'
			//        // 'Content-Type': 'application/x-www-form-urlencoded',
			//      },
			// 	body:{} ,//发送的数据
			
		 // }).then(res=>res.json()).then(data=>{
			//  console.log(data)
		 // })
		 
		 fetch("https://api.it120.cc/ljf/shop/goods/list",{
			 method:"post",
			   headers: {
			        // 'Content-Type': 'application/json'
			        'Content-Type': 'application/x-www-form-urlencoded'
			      },
			// body:JSON.stringify{
			// 	categoryId:157779
			// },
			body:"categoryId=157773&page=1&pageSize=100"
		 }).then(res=>res.json()).then(data=>{
			 console.log(data)
		 })
		  // 157779
		  
	}
	componentDidUpdate(){//react组件的更新后
		console.log("更新后")
	}
	componentWillUnmount(){//会在组件卸载及销毁之前直接调用
		console.log("组件销毁后")
	}
	
}
export default withRouter(Pay)

//  路由 react-router-dom
// 前后端交互 fetch axios 
// react 可以使用那些ui框架 antd
//  redux 状态管理


